<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: snow_header"></head>


<!--<meta charset="utf-8">-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--<title></title>-->
<!--<meta name="keywords" content="">-->
<!--<meta name="description" content="">-->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!--<link th:href="@{/ajax/libs/bootstrap/css/bootstrap.css}" rel="stylesheet"/>-->
<!--<link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>-->
<!--&lt;!&ndash; bootstrap-table 表格插件样式 &ndash;&gt;-->
<!--<link th:href="@{/ajax/libs/bootstrap-table1.12.1/bootstrap-table.css}" rel="stylesheet"/>-->
<!--&lt;!&ndash;<link th:href="@{/ajax/libs/bootstrap-treetable/bootstrap-treetable.css}" rel="stylesheet"/>&ndash;&gt;-->
<!--<link th:href="@{/css/animate.css}" rel="stylesheet"/>-->
<!--<link th:href="@{/snow/css/style.css}" rel="stylesheet"/>-->
<!--<link th:href="@{/ajax/libs/select/select2.css}" rel="stylesheet"/>-->
<!--<link th:href="@{/snow/css/snow-ui.css}" rel="stylesheet"/>-->
<!--<link th:href="@{/snow/css/snow-bootstraptable.css}" rel="stylesheet"/>-->

<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">


<style type="text/css">

</style>
<body class="gray-bg">
<!--<body >-->
<!--<div class="container ">-->
    <!--<div class="row ">-->
        <!--<div class="select-info col-sm-12">-->
            <!--<div class="col-md-3">第一行第一列</div>-->
            <!--<div class="col-md-3">第一行第2列</div>-->
            <!--<div class="col-md-3">第一行第3列</div>-->
            <!--<div class="col-md-3">第一行第4列</div>-->
            <!--<div class="col-md-3">第一行第一列</div>-->
        <!--</div>-->
    <!--</div>-->
    <!--<div class="row ">-->
        <!--<div class="col-md-3">第二行</div>-->
    <!--</div>-->
    <!--<div class="row">第3行</div>-->

    <!--<div class="row">第4行</div>-->

<!--</div>-->

<!-- 使用 container 时,大屏幕显示效果没有全屏 -->
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 select-info">
                <div class="col-md-3">
                    <label class="form-inline control-label" >
                        组名称：<input id="groupName" th:field="${configGroup.groupName}" type="text" readonly  class="form-control"/>
                    </label>
                    <i id="configGroup-modify" th:class="'fa fa-gear fa-spin fa-2x '+(${configGroup.modify}==1?'status-red':'status-green')" th:style="';text-align:center;vertical-align: middle;'"></i>
                </div>
                <div class="col-md-3">
                    <label class="form-inline control-label" >
                        描述： <input th:field="${configGroup.description}"  type="text" readonly  class="form-control"/>
                    </label>
                </div>
                <div class="col-md-3">
                    <label class="form-inline control-label" >
                        类型：<input th:field="${configGroup.groupType}"type="text" readonly  class="form-control"/>
                    </label>
                </div>
                <div class="col-md-3">
                    <label class="form-inline control-label" >
                        配置前缀：<input th:field="${configGroup.propertyPrefix}" type="text" readonly  class="form-control "/>
                    </label>
                </div>
                <!--
                <div class="select-list">
                    <ul>
                        <li>
                            组名称：<input th:field="${configGroup.groupName}" style="background-color: rgb(238, 238, 238);" type="text" readonly  class="input-mini"/>
                        </li>
                        <li>
                            描述：<input th:field="${configGroup.description}" style="background-color: rgb(238, 238, 238);" type="text" readonly />
                        </li>
                        <li>
                            配置组类型：<input th:field="${configGroup.groupType}" style="background-color: rgb(238, 238, 238);" type="text" readonly />
                        </li>
                        <li>
                            配置前缀：<input th:field="${configGroup.propertyPrefix}" style="background-color: rgb(238, 238, 238);" type="text" readonly />
                        </li>
                    </ul>
                </div>
                -->
            </div>
            <div class="col-sm-12 select-info">
                <div class="btn-group hidden-xs" id="toolbar" role="group">
                    <a class="btn btn-outline btn-success btn-rounded" onclick="snowTable.operateAdd($._configGroupId,0)" shiro:hasPermission="module:group:add">
                        <i class="fa fa-plus"></i> 新增
                    </a>
                    <a class="btn btn-outline btn-success btn-rounded" onclick="importYaml($._configGroupId)" shiro:hasPermission="module:group:add">
                        <i class="fa fa-plus"></i> 导入
                    </a>
                    <a class="btn btn-outline btn-success btn-rounded" onclick="exportYaml($._configGroupId)" shiro:hasPermission="module:group:add">
                        <i class="fa fa-download"></i> 导出
                    </a>
                    <a class="btn btn-outline btn-danger btn-rounded" onclick="release($._configGroupId)" shiro:hasPermission="module:group:release">
                        <i class="fa  fa-cloud-upload"></i> 发布
                    </a>
                    <!--<a class="btn btn-outline btn-danger btn-rounded" onclick="$.operate.removeAll()" shiro:hasPermission="module:group:remove">-->
                        <!--<i class="fa fa-trash-o"></i> 删除-->
                    <!--</a>-->
                </div>
                <div class="col-sm-12 select-table table-striped">
                    <!-- style="white-space:nowrap"-->
                    <table id="bootstrap-table" data-mobile-responsive="true"></table>
                </div>
            </div>
        </div>
    </div>
    <div th:include="include :: snow_footer"></div>


<!--<script th:src="@{/ajax/libs/bootstrap/jquery.min.js}"></script>-->
<!--<script th:src="@{/ajax/libs/bootstrap/js/bootstrap.js}"></script>-->

<!--&lt;!&ndash; bootstrap-table 表格插件 &ndash;&gt;-->

<!--<script th:src="@{/ajax/libs/bootstrap-table1.12.1/bootstrap-table.js}"></script>-->
<!--<script th:src="@{/ajax/libs/bootstrap-table1.12.1//locale/bootstrap-table-zh-CN.min.js}"></script>-->
<!--<script th:src="@{/ajax/libs/bootstrap-table1.12.1/extensions/mobile/bootstrap-table-mobile.min.js}"></script>-->
<!--<script th:src="@{/ajax/libs/bootstrap-table1.12.1/extensions/toolbar/bootstrap-table-toolbar.min.js}"></script>-->
<!--&lt;!&ndash; jquery-validate 表单验证插件 &ndash;&gt;-->
<!--<script th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>-->
<!--<script th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>-->
<!--<script th:src="@{/ajax/libs/validate/jquery.validate.extend.js}"></script>-->
<!--&lt;!&ndash; jquery-validate 表单树插件 &ndash;&gt;-->
<!--<script th:src="@{/ajax/libs/bootstrap-treetable/bootstrap-treetable.js}"></script>-->
<!--&lt;!&ndash; jquery-export 表格导出插件 &ndash;&gt;-->
<!--<script th:src="@{/ajax/libs/bootstrap-table1.12.1/extensions/export/bootstrap-table-export.js}"></script>-->
<!--&lt;!&ndash;<script th:src="@{/ajax/libs/bootstrap-table1.12.1/extensions/export/tableExport.js}"></script>&ndash;&gt;-->
<!--&lt;!&ndash; 遮罩层 &ndash;&gt;-->
<!--<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>-->
<!--<script th:src="@{/ajax/libs/iCheck/icheck.min.js}"></script>-->
<!--<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>-->
<!--<script th:src="@{/ajax/libs/layui/layui.js}"></script>-->
<!--<script th:src="@{/snow/js/common.js?v=2.4.0}"></script>-->
<!--<script th:src="@{/snow/js/snow-ui.js?v=2.4.0}"></script>-->
<!--<script th:src="@{/snow/js/snow-bootstrap.js?v=2.4.0}"></script>-->
<!--<script th:src="@{/snow/js/Math.uuid.js}"></script>-->
<!--<script src="http://tajs.qq.com/stats?sId=62048022"></script>-->
<!--<script th:inline="javascript"> var ctx = [[@{/}]]; </script>-->


<script th:src="@{/ajax/libs/bootstrap-table1.12.1/extensions/export/bootstrap-table-treegrid.js}"></script>
<!--<script th:src="@{/ajax/libs/bootstrap-table1.12.1/extensions/export/jquery.treegrid.min.js}"></script>-->
<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>

    <script th:inline="javascript">
        /*<![CDATA[*/
        var configGroupId = [[${configGroup.configGroupId}]];
        /*]]>*/

        var addFlag = [[${@permission.hasPermi('module:group:add')}]];
        var editFlag = [[${@permission.hasPermi('module:group:edit')}]];
        var listFlag = [[${@permission.hasPermi('module:group:list')}]];
        var removeFlag = [[${@permission.hasPermi('module:group:remove')}]];
        var prefix = ctx + "module/groupProperty";
        var datas = [[${@dict.getType('sys_yes_no')}]];

        var snowTable=$.snowBootstrap.init();
        $(function() {
            var options = {
                url: prefix + "/listtree/"+configGroupId,
                idField: "configGroupPropertyId",
                treeShowField: 'description',
                parentIdField: 'parentId',
                createUrl: prefix + "/add/{id}/{parentId}/",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                modalName: "配置组属性",
                columns: [
                //     {
                //     field:"ck",
		        //     checkbox: true
		        // },
                {
                    field : 'propKey',
                    title : '属性名'
                },
                {
                    field : 'propValue',
                    title : '属性值'
                },
                {
                    field : 'description',
                    title : '描述'
                },
				{
					field : 'configGroupPropertyId', 
					title : '配置属性ID' 
				},
				// {
				// 	field : 'configGroupId',
				// 	title : '配置组ID'
				// },
				{
					field : 'propConstraint', 
					title : '属性约束',
                    formatter: function(value, row, index) {
                        if(row.propConstraint==undefined||row.propertyConstraint==''||row.propertyConstraint==null){
                            return "";
                        }
                        return row.propertyConstraint.name+'['+row.propertyConstraint.description+']';
                    }
				},
                {
                    field : 'orderNum',
                    title : '排序'
                },
                {
                    field: 'pushUpdate',
                    title: '推送更新',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var valueTemp='N';
                        if(value){
                           valueTemp='Y';
                        }
                        console.log(value,valueTemp,datas,$.table.selectDictLabel(datas, valueTemp));
                        return $.table.selectDictLabel(datas, valueTemp);
                    }
                },
                {
                    field : 'remark',
                    title : '备注'
                },
				// {
				// 	field : 'createBy',
				// 	title : '创建者'
				// },
				// {
				// 	field : 'createTime',
				// 	title : '创建时间'
				// },
				// {
				// 	field : 'updateBy',
				// 	title : '更新者'
				// },
				// {
				// 	field : 'updateTime',
				// 	title : '更新时间'
				// },
		        {
		            title: '操作',
		            align: 'center',
		            formatter: function(value, row, index) {
		            	var actions = [];
		            	actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="snowTable.operateEdit(\'' + row.configGroupPropertyId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-info  btn-xs ' + addFlag + '" href="#" onclick="snowTable.operateAdd($._configGroupId,\'' + row.configGroupPropertyId + '\')"><i class="fa fa-plus">新增</i></a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="remove(\''+row.configGroupId+'\',\'' + row.configGroupPropertyId + '\')"><i class="fa fa-remove"></i>删除</a>');
						return actions.join('');
		            }
		        }
		        ],
                onLoadSuccess: function(data) {
                    snowTable._bootStrapTable.treegrid({
                        //去掉注释默认收缩
                        initialState: 'collapsed',//收缩
                        treeColumn: 0,//指明第几列数据改为树形
                        //加上后图标不显示
                        // expanderExpandedClass: 'glyphicon glyphicon-triangle-bottom',
                        // expanderCollapsedClass: 'glyphicon glyphicon-triangle-right',
                        onChange: function() {
                            snowTable._bootStrapTable.bootstrapTable('resetWidth');
                        }
                    });
                }
            };
            snowTable.treeTableInit(options);
        });

        function remove(configGroupId,id) {
            var hasChilds=true;
            $.ajax({
                async:false,
                type : 'post',
                url: prefix + "/hasChilds?uniqueId=" + id,
                success : function(result) {
                    console.log("result=",result);
                    if (!result) {
                        hasChilds=false;
                    }
                }
            });
            var msg="确定删除该条[" + snowTable._option.modalName + "]信息吗?";
            if(hasChilds){
                // $.modal.alertError("该条记录包含关联子级,不允许删除");
                msg="该条记录包含关联子级,该操作将会同时删除子级记录,确定码?";
            }

            $.modal.confirm(msg, function() {
                $.ajax({
                    type : 'post',
                    url: prefix + "/remove?configGroupId="+configGroupId+"&ids=" + id,
                    success : function(result) {
                        if (result.code == web_status.SUCCESS) {
                            $.modal.msgSuccess(result.msg);
                            snowTable.refresh();
                            refreshModifyStatus();
                        } else {
                            $.modal.msgError(result.msg);
                        }
                    }
                });
            });
        }
        function refreshModifyStatus() {
            $("#configGroup-modify").removeClass("status-green");
            $("#configGroup-modify").addClass("status-red");
        }


        function importYaml(id) {
            var url = ctx + "module/groupPropertyImport" + "/importText/"+id;
            $.modal.open("导入" , url,600,600);
        }

        function exportYaml(id){
            var url = ctx + "module/groupPropertyExport"  + "/export/yaml?configGroupId="+id;
            $.modal.open("导出" , url,600,600);
        }

        function release(id) {
            var url = ctx + "module/group"  + "/release/"+id;
            $.modal.open("发布" , url,600,600);
        }
    </script>
<script th:inline="javascript">
    $(function() {
        $.extend({
            _configGroupId:[[${configGroup.configGroupId}]]
        });

    });

</script>
</body>
</html>